<script setup lang="ts">
import { LinkOutlined } from '@ant-design/icons-vue';

const funcList = [
  {
    title: '如何打造爆款截流？（含起店全流程）',
    link: 'https://scn8p8fy52tg.feishu.cn/wiki/PDfAwgkC1itmmQkSRPjc87hBnef',
  },
  {
    title: '商品违规如何早知道？',
    link: 'https://scn8p8fy52tg.feishu.cn/wiki/RucuwBirXiwDF4kFz0ncXxTan0e',
  },
  {
    title: '没有流量的商品应该早点清理',
    link: 'https://scn8p8fy52tg.feishu.cn/wiki/I5ZGwTmmGipJcukQqcxcZ5GCnkh',
  },
  {
    title: '投产还不会计算？ ROI计算器来帮你',
    link: 'https://scn8p8fy52tg.feishu.cn/wiki/YwLZwj0l5i5WUTkQ9TOcgtjRntg',
  },
];
function gotoLinks(link: string) {
  open(link, link);
}
</script>

<template>
  <div
    class="bg-card text-card-foreground border-border mt-5 rounded-xl border"
  >
    <div class="flex flex-col gap-y-1.5 p-5 py-4">
      <h3 class="text-lg font-semibold tracking-tight">
        使用教程
        <a-button
          type="link"
          @click="
            () =>
              gotoLinks(
                'https://scn8p8fy52tg.feishu.cn/wiki/RxBowCh4windQMkjimhcaUkynHd',
              )
          "
        >
          查看更多
        </a-button>
      </h3>
    </div>
    <div>
      <div
        v-for="(item, index) in funcList"
        :key="index"
        :class="index !== funcList.length - 1 ? 'border-t' : ''"
        class="hover:text-primary w-full cursor-pointer border-t p-4"
        @click="gotoLinks(item.link)"
      >
        <LinkOutlined /> {{ item.title }} >
        <!-- <div class="pb-4 text-center">
          <Icon
            :icon="item.meta.icon"
            style="margin: 0 auto; font-size: 26px; color: #f86803"
          />
        </div>
        <a-button style="padding: 0" type="link">
          {{ item.meta.title }}
        </a-button> -->
      </div>
    </div>
  </div>
</template>
